<template>
	<view>
		<view class="zjc-rb">
			<uni-swiper-dot :info="routeInfo.routeImags" :current="current" field="content" mode="default">
				<swiper class="swiper-box" @change="change" autoplay="true" interval="3000">
					<swiper-item v-for="(item ,index) in routeInfo.routeImags" :key="index" style="width:100%; margin:  0 auto;">
						<image style="width: 750rpx; height: 500rpx;" :src="item" alt="" mode="aspectFill">
					</swiper-item>
				</swiper>
			</uni-swiper-dot>
		</view>
		<view class="rd-main">
			<view style="margin-top: 24rpx; margin-left: 24rpx; font-size: 40rpx; font-weight: 700;">
				<text>{{routeInfo.routeName}}</text>
			</view>
			
			<view v-html="routeInfo.routeContent" style="width: 90%; margin-top: 24rpx; margin-left: 24rpx;">
				
			</view>
			<view style="height: 100rpx; text-align: center; width: 100%; margin-top: 40rpx;">
				<text style="font-size: 24rpx; color: gray;">到底了</text>
			</view>
		</view>
		
	
		
		
	</view>
</template>

<script>
import viewListVue from '../view-list/view-list.vue'
	export default {
		data() {
			return {
				current:1,
				routeId:null,
				routeInfo:{
					routeName:"一日游，青山湖--瑶湖",
					routeImags:[
						"../../static/rb1.jpg",
						'../../static/rb2.jpg',
						'../../static/rb3.jpg'
					],
					routeContent:"<h1>你好</h1> <view>绿水青山</view>"
				}
			}
		},
		onLoad(options){
			this.routeId = options.routeId
			this.init(this.routeId)
		},
		methods: {
			change(e){
				this.current = e.detail.current
			},
			init(routeId){
				this.request({
					url:"/route/detail",
					method:'GET',
					data:{
						routeId:routeId
					}
				}).then(res=>{
					this.routeInfo = res.data
				})
			}
		}
	}
</script>

<style scoped>
.zjc-rb {
		width: 100%;
		height: 700rpx;
}
.swiper-box{
		width: 100%;
		height: 500rpx;
}

.rd-main {
	position: absolute;
	top: 450rpx;
	border-radius: 20rpx;
	width: 100%;
	background-color: #fff;
}

</style>